<template>
	<div class="userManage">
		<search :selectedList='selectedList' :currentTotal='userCount' :total='userCount' @search='handleCurrentChange' title='用户' @delete='deleteUser'>
			<el-button type="primary"  slot='btn'>添加用户</el-button>
			<template slot='txt'>
				<el-input v-model="seachValue" placeholder="输入用户名搜索" @keydown.enter.native='handleCurrentChange(1)' clearable></el-input>
				<!-- <div class="total">
					共有用户数据：{{userCount}}
				</div> -->
			</template>
		</search>
		<tableList 
			:tableData="userData" 
			:tableHeader="tableHeader"  
			:total='userCount'
			:page='nowPage' 
			@changeSwitch='updateUser'
			@selectionChange='handleSelectionChange'
			@changePage='handleCurrentChange'>
		</tableList>
	</div>
</template>
<script>
	import tableList from '@/components/tableList'
	import search from '@/components/search'
	import {api} from '@/api/public'
	export default{
		name:'userManage',
		data(){
			return{
				userData:[],
				avatorList:[],
				selectedList:[],
				userCount:0,
				nowPage:1,
				loading:false,
				seachValue:'',
				tableHeader:[
					{ prop: 'id', label: '用户Id', width: '110px' },
					{ prop: 'avator', label: '用户头像',width:"220px",isImg:true,title:'点我预览用户头像' },
					{ prop: 'name', label: '用户名',minWidth:'150px'},
					{ prop: 'email', label: '用户邮箱', minWidth: '130px'},
					{ prop: 'phone', label: '手机号码', minWidth: '130px'},
					{ prop: 'create_time', label: '创建时间',width: '105px' },
					{ prop: 'is_show', label: '当前状态',minWidth:"85px",isSwicth:true,isUser:true},
					{ prop: 'oper', label: '操作', fixed: 'right', minWidth: '130px',
						oper: [
							{ name: '查看'},
							{ name: '编辑'},
							{ name: '删除',clickFun:this.deleteUser}
						]
					}
				],
			}
		},
		components:{
			tableList,search
		},
		methods:{
			openAvator(url) {
		        if (url) {
		      		this.avatorList=[url];
		      	}
		    },  
		    async setUserDisable(userId,value){
		    	let {success}=await api('put','admin','user',{userId:userId,isShow:value});
		    	if(success) this.info('操作成功~~~');
		    	else this.info('操作失败~~~','e');
		    },
		    handleCurrentChange(page) {
	      		this.nowPage=page?page:1;
	        	this.getAllUser(this.nowPage);
      		},
      		handleSelectionChange(list) {	
      			this.selectedList=list;
      		},
      		async getAllUser(page){
      			let {result,count}=await api('get','admin','user',{page:page,username:this.seachValue});
      			this.userData=result;
      			this.userCount=count;
      		},
      		async deleteUser(item,index,tableData){
      			this.$confirm(`你确定要删除用户吗？<p>删除后，用户上传的图片、短网址数据会被删除，图片、短网址url不会被删除</p>`,{
      				dangerouslyUseHTMLString:true
      			})
	        	.then(async res => {
	        		let id;
		        	if(index!==undefined) id=[item.id];
	        		else{
						id=this.selectedList.map((item)=>{ return item.id; })  
					}
					let {success}=await api('delete','admin','user',{id:id});
					if(!success) return this.info('删除用户失败','e');
					this.info('删除用户成功');
	        		if((this.userCount/10)===this.nowPage-1) this.nowPage--;
	        		this.getAllUser(this.nowPage);
	        	}).catch(res => {});	
      		},
      		async updateUser(val,id){
      			let {success}=await api('put','admin','user',{id:id,isShow:val});
      			if(!success)return this.info('当前状态切换失败','e');
      			this.info('当前状态切换成功');
      		}
		},
		created(){
			this.getAllUser(this.nowPage);
		}
	}
</script>
<style scoped lang="stylus">
	.userManage{
		>>>.table{
			.el-table{
				tr{
					td{
						.cell{
							display: flex;
						    align-items: center;
						    justify-content: center;
						}
						.el-image__inner{
							height: 115px;
					    	width: 115px;
							cursor: pointer;
							border-radius: 50%;
							max-width: inherit;
						}
					}
				}
			}
		}
		>>> .el-checkbox__inner{
			width: 20px;
	    	height: 20px;
		}
		>>> .el-checkbox__inner::after {
			height: 12px;
			left: 5px;
			width: 7px;
		}
	}
</style>